<template>
  <div>
    <a-card class="cardBox coreIndex">
      <div class="tit" slot="title">核心指标 <span>(更新频率：实时)</span><div class="nowTime">{{ nowtime | updatetime }} 星期{{ week|getweek }}</div></div>
      <div class="content">
        <div class="coreBox">
          <div class="items" v-for="(item, i) in coreIndexData" :key="i">
            <div class="item">
              <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
              <div class="num">{{ item.num }}
                <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
              </div>
              <div class="name">{{ item.name }}<span v-if="item.unit">({{item.unit}})</span> {{i===0?'>':''}}</div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'HytBoard2',
    filters: {
      updatetime: function (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
      },
      getweek (e) {
        var week = ['一', '二', '三', '四', '五', '六', '日']
        return week[e - 1]
      }
    },
    data () {
      return {
        timer: null,
        nowtime: new Date(),
        week: moment().format('E'),
        coreIndexData: [
          { type: 0, ico: 'icon-fazhanguanli', num: '165.76', unit: '亿元', name: '年度营收' },
          { type: 0, ico: 'icon-guoji', num: '90%', unit: '', name: '获奖作品' },
          { type: 0, ico: 'icon--fuwu', num: '13,000', unit: '人', name: '培养人才' },
          { type: 1, ico: 'icon-zhishu', num: '2,367', unit: '家', name: '影视企业' },
          { type: 1, ico: 'icon-daohangjuzu', num: '351', unit: '个', name: '接待剧组' },
          { type: 1, ico: 'icon-renshu', num: '933.77', unit: '万', name: '旅游人次' }
        ]
      }
    },
    mounted () {
      const _this = this
      this.timer = setInterval(() => {
        _this.nowtime = new Date()
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    watch: {
    },
    methods: {
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .coreIndex {
    .content {
      /*display: grid; grid-template-columns: 1fr 1fr 1fr;*/
    }
    .tit span {font-size: 16px; color: #666}
    .tit .nowTime { display: inline-block; float: right; font-size: 18px; color: #444; font-weight: normal}
    .items {
      padding: 10px 0 10px 10px;
      /*text-align: center;*/
      .item {
        display: inline-block;
        text-align: left;
        margin: auto;
        position: relative;
        padding-left: 60px;
      }
      .itemCursor {cursor: pointer;
        .name {color: #37a2da}
      }
      .ico {
        position: absolute;
        left: 0;
        text-align: center;
        top: 8px;
        width: 50px;
        line-height: 50px;
        height: 50px;
        background: #4194fb;
        border-radius: 50%;
      }
      .ico0{ background: #E85894}
      .ico1{ background: #a970e1}
      .ico2{ background: #6a92ed}
      .ico3{ background: #6792ec}
      .ico4{ background: #e85895}
      .ico5{ background: #ea7146}
      .ico6{ background: #ed9720}
      .ico7{ background: #61c1f8}
      .ico8{ background: #a970e1}

      .iconfont {  font-size: 30px; color: #fff;}
      .num {
        font-size: 32px; line-height: 40px;
        font-weight: 500; display: flex;
        color: rgba(0, 0, 0, 0.6);
        span {padding-top: 8px; font-weight: initial;
          line-height: 32px; font-size: 15px; margin-left: 5px; color: #777 }
      }

      .name {
        display: inherit; font-size: 15px;
      }
    }

  }
  .coreBox { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-left: 60px}
</style>
